<template>
  <NavBar></NavBar>
  <div class="HandleFriend-container">
    <div class="HandleFriend-box">
      <div class="search-title">搜索用户</div>
      <el-form :model="form" @submit.prevent="handleSearch">
        <el-form-item>
          <el-input
            v-model="form.searchParam"
            placeholder="输入用户名或邮箱..."
            style="max-width: 600px"
            class="input-with-select"
          >
            <template #append>
              <el-button :icon="Search" native-type="submit" />
            </template>
          </el-input>
        </el-form-item>
      </el-form>

      <!-- 使用 Element Plus 的表格组件 -->
      <el-table
        :data="users"
        style="width: 100%; height: 60vh; font-size: 20px"
      >
        <el-table-column prop="avatarUrl" label="头像">
          <template #default="{ row }">
            <img :src="row.avatarUrl" alt="" class="user-avatar" />
          </template>
        </el-table-column>
        <el-table-column class="table_column" prop="username" label="用户名" />
        <el-table-column class="table_column" prop="email" label="邮箱" />
        <el-table-column class="table_column" label="操作" width="120">
          <template #default="{ row }">
            <el-button
              type="primary"
              @click.prevent="handleAddFriend(row.userId)"
            >
              添加好友
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import $ from "jquery"; // 引入 jQuery
import { Search } from "@element-plus/icons-vue";
import NavBar from "@/components/NavBar.vue";

export default {
  components: { NavBar },
  setup() {
    const store = useStore();
    const form = reactive({
      searchParam: "",
    });
    const users = ref([]);

    const handleSearch = () => {
      const token = store.state.user.token;
      if (form.searchParam)
        $.ajax({
          url: `http://localhost:7090/api/user/search/${form.searchParam}`,
          type: "GET",
          headers: {
            Authorization: `Bearer ${token}`,
          },
          success(resp) {
            if (resp.status === "success") {
              users.value = resp.data; // 更新用户列表
            } else {
              ElMessage.error(resp.message || "搜索失败");
            }
          },
          error(resp) {
            console.error(resp);
            ElMessage.error("网络错误，请重试");
          },
        });
    };

    const handleAddFriend = (receiverId) => {
      $.ajax({
        url: "http://localhost:7090/api/friend/request/send",
        type: "POST",
        contentType: "application/json",
        headers: {
          Authorization: `Bearer ${store.state.user.token}`,
        },
        data: JSON.stringify({
          senderId: store.state.user.userId,
          receiverId: receiverId,
        }),
        success(resp) {
          if (resp.status === "success") {
            ElMessage.success("好友请求已发送");
          } else {
            ElMessage.error(resp.message || "发送好友请求失败");
          }
        },
        error(resp) {
          console.error(resp);
          ElMessage.error("网络错误，请重试");
        },
      });
    };

    return {
      form,
      users,
      handleSearch,
      handleAddFriend,
      Search,
    };
  },
};
</script>

<style scoped>
.user-avatar {
  width: 30%;
}

.HandleFriend-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  /*background-color: #f7f7f7;*/
}

.HandleFriend-box {
  height: 80vh;
  width: 75%;
  background-color: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(5, 5, 5, 0.11);
}

.search-title {
  text-align: center;
  font-size: 30px;
  margin-bottom: 20px;
}

.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}

.el-input.input-with-select {
  margin-left: auto;
  margin-right: auto;
}
</style>
